<template>
    <div class="fixed left-[2rem] top-[50%] translate-y-[-50%]">
        <div class="flex flex-col items-center gap-[1rem]">
            <div v-for="item in iconList" :key="item.name" class="w-[2.5rem] h-[2.5rem] bg-[#fff] rounded-[9999px] flex justify-center items-center gap-[0.5rem] shadow-[0px_2px_8px_0px_#0000001A;] cursor-pointer">
                <img :src="item.image" alt="icon"  :class="`w-[${item.imageWidth}] h-[${item.imageHeight}]`">
            </div>
        </div>
        
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    const iconList = ref([
        {
            name: '点赞',
            image: '/public/icon/like.png',
            isActive: false,
            imageWidth:'1rem',
            imageHeight:'1rem'
        },
        {
            name: '评论',
            image: '/public/icon/comments.png',
            imageWidth:'1rem',
            imageHeight:'1rem'
        },
        {
            name: '收藏',
            image: '/public/icon/label-2.png',
            imageWidth:'0.75rem',
            imageHeight:'1rem'
        },
        {
            name: '分享',
            image: '/public/icon/share-2.png',
            imageWidth:'1rem',
            imageHeight:'1rem'
        },
        {
            name: '回到顶部',
            image: '/public/icon/up.png',
            imageWidth:'0.75rem',
            imageHeight:'1rem',
            function: () => {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                })
            }
        },
    ])
</script>
<style scoped lang="scss">

</style>